<template>
  <div id='tmpl'>
	   <div class="title">
		   <h4 v-text="info.title"></h4>
		   <p>{{ info.add_time | datefmt('YYYY-MM-DD') }}  {{info.click}}次浏览</p>
	   </div>
		<div id="content" v-html="info.content" ></div>
        <comment :id='id'></comment>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import comment from '../subcom/comment.vue'
export default {
  name: "newsinfo",
  components:{
      comment:comment
  },
  data () {
    return {
        id:'0',
        info:{}
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getnewsInfo()

  },
  methods:{
      getnewsInfo(){
          var url= this.common.domain+'/api/getnew/'+this.id;
          this.$http.get(url).then(function(res){
              var body=res.body;
              if(body.status!=0){
                  Toast(body.message);
                  return
              }
              this.info=body.message[0]

          })
      }
  }
}
</script>
<style lang="css" scoped>
vue-loader中的深度选择器可以解决父组件无法修改子组件样式的问题
/* 如果样式是css书写,用>>>可以修改子组件; */
/* 如果是lees或scss,用/deep/ */
#content{
    width:100%;
}
#content >>> img{
    width:100%;
}
</style>